<script setup lang="ts">
  import { ref, watch, computed } from 'vue';
  import {
    queryTraineeDetails,
    deleteStudent,
    genResourceUploadToken,
    updateStudentAvatar,
  } from '@/api/reemployment-management/trainee';
  import { useUploader } from '@/hooks/useUploader';
  import * as Lodash from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import errorIcon from '@/assets/images/not-upload.png';

  const loading = ref(false);
  const emits = defineEmits(['edit', 'update']);
  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
  });

  const baseNameMap = {
    id: { key: 'id', label: '学员ID' },
    name: { key: 'name', label: '学员姓名' },
    gender: { key: 'gender', label: '学员性别' },
    genderName: { key: 'genderName', label: '学员性别' },
    birthday: { key: 'birthdate', label: '出生日期' },
    nation: { key: 'nationName', label: '民族' },
    avatar: { key: 'avatarUrl', label: '上传头像' },
    native: { key: 'areaName', label: '籍贯' },
    provinceName: { key: 'provinceName', label: '籍贯' },
    cityName: { key: 'cityName', label: '籍贯' },
    districtName: { key: 'districtName', label: '籍贯' },
    marriage: { key: 'maritalStatus', label: '婚姻状况' },
    marriageName: { key: 'maritalStatusName', label: '婚姻状况' },
    politics: { key: 'politicalStatusName', label: '政治面貌' },
    education: { key: 'educationLevelName', label: '文化程度' },
    phone: { key: 'phoneNumber', label: '联系电话' },
    address: { key: 'homeAddress', label: '家庭住址' },
    zipCode: { key: 'postalCode', label: '邮政编码' },
    idCard: { key: 'idcardNo', label: '身份证号' },
    household: { key: 'householdTown', label: '户口所在镇/街道' },
    unemployment: {
      key: 'unemploymentCertificateNumber',
      label: '失业证或低保号码',
    },
    disabilityDegree: { key: 'disabilityDegreeName', label: '伤残等级' },
    disabilityLevel: { key: 'disabilityLevelName', label: '伤残类别' },
    disabilityNumber: { key: 'disabilityNumber', label: '残疾证号码'},
    proTraining: { key: 'professionalTraining', label: '受过何种专业训练' },
    family: { key: 'contacts', label: '家庭成员' },
    familyId: { key: 'id', label: '序号' },
    familyName: { key: 'name', label: '姓名' },
    familyRelationship: { key: 'relation', label: '关系' },
    familyIncome: { key: 'incomeChannel', label: '经济来源' },
    familyWorkplace: { key: 'unitName', label: '单位名称' },
    familyPosition: { key: 'unitTitle', label: '职务' },
    qualIdCardPerson: { key: 'idcardFrontUrl', label: '身份证人像面' },
    qualIdCardInsignia: { key: 'idcardBackendUrl', label: '身份证国徽面' },
    qualDisabilityCardPerson: {
      key: 'disabilityFrontUrl',
      label: '残疾证人像面',
    },
    qualDisabilityDetails: {
      key: 'disabilityBackendUrl',
      label: '残疾证详情面',
    },
  };

  const traineeDetails = ref<any>({});
  const traineeDetailsComputed = computed(() => {
    const item = Lodash.cloneDeep(traineeDetails.value);
    // if (!item[baseNameMap.genderName.key]) {
    //   item[baseNameMap.genderName.key] = getGenderName(item[baseNameMap.gender.key]);
    // }
    // if (!item[baseNameMap.marriageName.key]) {
    //   item[baseNameMap.marriageName.key] = getMaritalStatusName(item[baseNameMap.marriage.key]);
    // }
    return item;
  });

  const onEdit = () => {
    emits('edit', props.id);
  };

  const handleDelete = () => {
    // 删除
    console.log('delete');
    loading.value = true;
    deleteStudent(props.id)
      .then((res) => {
        Message.success(res);
        emits('update');
      })
      .catch((err) => {})
      .finally(() => {
        loading.value = false;
      });
  };

  const avatarFile = ref<any>();

  const avatarUploader = useUploader({
    apiFun: genResourceUploadToken,
    props: {
      listType: 'picture-card',
      // limit: 1,
      fileList: [] as any[],
    },
    onOk: (result) => {
      avatarFile.value = result.item;
      console.log('success', result);
      updateStudentAvatar(props.id, result.resId).then((res)=>{
        Message.success(res);
      }).catch((err)=>{}).finally(()=>{});
    },
  });

  const getTraineeInfoDetails = () => {
    loading.value = true;
    queryTraineeDetails(props.id)
      .then((res) => {
        traineeDetails.value = res;
        console.log('getTraineeInfoDetails', res);
        if (res.avatarUrl) {
          avatarFile.value = {
            url: res.avatarUrl,
            // status
          };
        }
      })
      .catch((err) => {})
      .finally(() => {
        loading.value = false;
      });
  };

  watch(
    () => props.id,
    (newVal) => {
      if (newVal) {
        getTraineeInfoDetails();
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div class="m-trainee-info">
    <table>
      <tr>
        <td class="title" colspan="9">基本信息</td>
      </tr>
      <tr>
        <td class="label">{{ baseNameMap.name.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.name.key] }}</td>
        <td class="label">{{ baseNameMap.genderName.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.genderName.key] }}</td>
        <td class="label">{{ baseNameMap.birthday.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.birthday.key] }}</td>
        <td class="label">{{ baseNameMap.nation.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.nation.key] }}</td>
        <td rowspan="4">
          <a-upload v-bind="avatarUploader.props"
            @change="avatarUploader.handleChange"
            @before-remove="avatarUploader.handleBeforeRemove"
            :show-file-list="false"
            v-show="!loading"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  avatarFile && avatarFile.status === 'error' ? ' arco-upload-list-item-error' : ''
                }`"
              >
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="avatarFile && avatarFile.url">
                  <img :src="avatarFile.url" />
                  <div class="arco-upload-list-picture-mask flex-vcenter" style="justify-content: center;">
                    <IconEdit />
                  </div>
                </div>
                <div v-else>
                  <a-button type="text">上传头像</a-button>
                </div>
              </div>
            </template>
          </a-upload>
        </td>
      </tr>
      <tr>
        <td class="label">{{ baseNameMap.native.label }}</td>
        <td>
          {{ traineeDetailsComputed[baseNameMap.native.key] }}
        </td>
        <td class="label">{{ baseNameMap.marriageName.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.marriageName.key] }}</td>
        <td class="label">{{ baseNameMap.politics.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.politics.key] }}</td>
        <td class="label">{{ baseNameMap.education.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.education.key] }}</td>
      </tr>
      <tr>
        <td class="label">{{ baseNameMap.phone.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.phone.key] }}</td>
        <td class="label">{{ baseNameMap.address.label }}</td>
        <td colspan="3">{{
          traineeDetailsComputed[baseNameMap.address.key]
        }}</td>
        <td class="label">{{ baseNameMap.zipCode.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.zipCode.key] }}</td>
      </tr>
      <tr>
        <td class="label">{{ baseNameMap.idCard.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.idCard.key] }}</td>
        <td class="label">{{ baseNameMap.household.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.household.key] }}</td>
        <td class="label">{{ baseNameMap.unemployment.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.unemployment.key] }}</td>
        <td class="label">{{ baseNameMap.disabilityLevel.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.disabilityLevel.key] }}</td>
      </tr>
      <tr>
        <td class="label">{{ baseNameMap.disabilityDegree.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.disabilityDegree.key] }}</td>
        <td class="label">{{ baseNameMap.disabilityNumber.label }}</td>
        <td>{{ traineeDetailsComputed[baseNameMap.disabilityNumber.key] }}</td>
        <td class="label">{{ baseNameMap.proTraining.label }}</td>
        <td colspan="4">{{
          traineeDetailsComputed[baseNameMap.proTraining.key]
        }}</td>
      </tr>
      <tr>
        <td class="title" colspan="9">家庭情况</td>
      </tr>
    </table>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>关系</th>
          <th colspan="2">经济来源</th>
          <th colspan="3">单位名称</th>
          <th>职务</th>
        </tr>
        <tr
          v-for="(item, index) of traineeDetails[baseNameMap.family.key]"
          :key="'mti-' + index"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ item[baseNameMap.familyName.key] }}</td>
          <td>{{ item[baseNameMap.familyRelationship.key] }}</td>
          <td colspan="2">{{ item[baseNameMap.familyIncome.key] }}</td>
          <td colspan="3">{{ item[baseNameMap.familyWorkplace.key] }}</td>
          <td>{{ item[baseNameMap.familyPosition.key] }}</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="title" colspan="9">资质证件</td>
        </tr>
        <tr>
          <td colspan="9">
            <div class="m-ti-quals">
              <span>
                <a-image
                  class="m-tiq-img"
                  :src="traineeDetails[baseNameMap.qualIdCardPerson.key]?.resourceUrl"
                >
                  <template #error-icon>
                    <div class="m-trainee-error-icon">
                      <img :src="errorIcon" alt="" />
                    </div>
                  </template>
                </a-image>
                <div>{{ baseNameMap.qualIdCardPerson.label }}</div>
              </span>
              <span>
                <a-image
                  class="m-tiq-img"
                  :src="traineeDetails[baseNameMap.qualIdCardInsignia.key]?.resourceUrl"
                >
                  <template #error-icon>
                    <div class="m-trainee-error-icon">
                      <img :src="errorIcon" alt="" />
                    </div>
                  </template>
                </a-image>
                <div>{{ baseNameMap.qualIdCardInsignia.label }}</div>
              </span>
              <span>
                <a-image
                  class="m-tiq-img"
                  :src="
                    traineeDetails[baseNameMap.qualDisabilityCardPerson.key]?.resourceUrl
                  "
                >
                  <template #error-icon>
                    <div class="m-trainee-error-icon">
                      <img :src="errorIcon" alt="" />
                    </div>
                  </template>
                </a-image>
                <div>{{ baseNameMap.qualDisabilityCardPerson.label }}</div>
              </span>
              <span>
                <a-image
                  class="m-tiq-img"
                  :src="traineeDetails[baseNameMap.qualDisabilityDetails.key]?.resourceUrl"
                >
                  <template #error-icon>
                    <div class="m-trainee-error-icon">
                      <img :src="errorIcon" alt="" />
                    </div>
                  </template>
                </a-image>
                <div>{{ baseNameMap.qualDisabilityDetails.label }}</div>
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="m-trainee-info-btns m-bottom-btns">
      <a-space>
        <a-popconfirm type="warning" style="width: 240px" @ok="handleDelete">
          <template #icon><span></span></template>
          <template #content>
            <div>
              <div
                style="font-weight: 600; text-align: center"
                class="flex-center"
              >
                <icon-info-circle
                  size="20"
                  style="color: rgb(var(--warning-6)); margin-right: 4px"
                />
                <span>确定删除该学员吗？</span>
              </div>
              <div style="margin-top: 4px; font-size: 12px; color: #86909c"
                >提示：此操作不可逆，删除后该学员将无法参加新的培训。</div
              >
            </div>
          </template>
          <ae-button purpose="delete">删除</ae-button>
        </a-popconfirm>

        <ae-button purpose="edit" @click="onEdit">编辑</ae-button>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .m-trainee-info {
    padding: 10px 0;
    color: var(--color-text-1);

    padding-bottom: 40px;
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .m-trainee-info {

    & :deep(.arco-upload-list-picture) {
      width: 100px;
      height: 120px;
      margin: 0;
      border-radius: 4px;
    }
    .m-ti-avatar {
      cursor: pointer;
      text-decoration: underline;
      color: rgb(var(--arcoblue-6));
      user-select: none;
    }

    .title {
      font-weight: 600;
      font-size: 15px;
    }

    .label {
      background-color: var(--color-neutral-3);
      user-select: none;
    }

    table {
      width: 100%;
      table-layout: fixed;
      // font-weight: 600;

      thead {
        th {
          border-top: none;
        }
      }

      th,
      td {
        border: 1px solid var(--color-neutral-4);
        padding: 10px 0px;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        overflow-wrap: break-word;
        // overflow-x: auto;
        white-space: wrap;
        // display: -webkit-inline-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // text-overflow: ellipsis;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      th {
        padding: 5px 0;
        background-color: var(--color-neutral-3);
      }

      td > input {
        outline: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding: 5px;
        text-align: center;
        pointer-events: auto;

        &:focus {
          background-color: rgb(var(--arcoblue-1));
        }
      }
    }

    .m-trainee-error-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .m-ti-quals {
    display: flex;
    justify-content: space-between;
    user-select: none;

    & > span {
      width: 24%;
    }

    .m-tiq-img {
      width: 280px;
      max-width: 100%;
      height: 160px;

      & :deep(.arco-image-img) {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
